<template>
  <!-- 管理员修改航班部分
可以通过选择日期和名字筛选航班
修改航班状态，延误或者取消，一旦取消，无法再修改 -->
  <div>
    <!--主体部分 -->
    <el-main>
      <div style="display:flex;justify-content:space-around;margin:20px 20px">
        <el-select clearable v-model="nameFilter.name" placeholder="所有航班">
          <el-option :label="item" :value="item" :key="index" v-for="(item,index) in this.flightNames">
          </el-option>
        </el-select>
        <el-date-picker value-format="yyyy-MM-dd" v-model="dateFilter.pickedDate" placeholder="所有日期"></el-date-picker>
        <el-button type="primary" icon="el-icon-refresh" @click="getData()"></el-button>
      </div>
      <!-- 航班列表 -->
      <div>
        <el-table :data="pagedList" border style="width: 100%" highlight-current-row
          :header-cell-style="{textAlign: 'center'}">
          <el-table-column prop="flightName" label="航班号" class-name="flight-ariline"></el-table-column>
          <el-table-column prop="startTime" label="出发时间"></el-table-column>
          <el-table-column prop="endTime" label="到达时间"></el-table-column>
          <el-table-column label="航班细节" min-width="150px">
            <template v-slot:default="slotProps">
              <div class="flight-detail">
                <div class="flight-detail">
                  <div class="detail-box">
                    <div class="detail-time">{{slotProps.row.startPos}}</div>
                    <div class='detail-airport'>{{slotProps.row.startAir}}</div>
                  </div>
                  <div>
                    <img src="../assets/flight_information.png" width="75px" height="20px">
                  </div>
                  <div class="detail-box">
                    <div class="detail-time">{{slotProps.row.endPos}}</div>
                    <div class="detail-airport">{{slotProps.row.endAir}}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="余票">
            <template v-slot:default="slotProps" style="font-size:18px">
              ￥{{slotProps.row.price}}
              {{slotProps.row.leftSeat}}/{{slotProps.row.maxSeat}}
            </template>
          </el-table-column>
          <el-table-column label="状态" class="flight-option" min-width="100px">
            <template v-slot:default="slotProps">
              <div style="margin:10px 60px">
                  <el-button :type="states.type[slotProps.row.state]" disabled>{{states.code[slotProps.row.state]}}
                          </el-button>

              </div>
              <div>
                <el-button :disabled="slotProps.row.state==-2 || slotProps.row.state==4" icon="el-icon-edit-outline"
                  @click="changeFlightState(slotProps.row)">状态</el-button>
                <el-button icon="el-icon-edit-outline" @click="changeFlightInfo(slotProps.row)">信息</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <!-- //底部分页栏 -->
    <el-footer class="footer">
      <el-pagination background layout="total,prev,pager,next" v-bind:page-count="totalPage"
        v-bind:total="totalAirplanes" v-bind:page-size="pageSize" @current-change="setCurrentPage"></el-pagination>
    </el-footer>
    <!-- 航班状态弹窗 -->
    <div>
      <el-dialog :title="changeState.flightInfo.flightName" :visible.sync="changeState.dialogVisible" center>
        <div style="font-weight:bolder;font-size:16px">
          <el-row type="flex" justify="space-around">
            <el-col :span="8">出发时间</el-col>
            <el-col :span="8">{{changeState.flightInfo.startTime}}</el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="8">到达时间</el-col>
            <el-col :span="8">{{changeState.flightInfo.endTime}}</el-col>
          </el-row>
        </div>
        <div>
          <el-select v-model="changeState.pickedState" placeholder="无操作">
            <el-option :label="item" :value="item" :key="item" v-for="item of changeState.states"></el-option>
          </el-select>
        </div>
        <div slot="footer">
          <el-button type="danger" @click="submitState" icon="el-icon-check">确 认</el-button>
          <el-button @click="cancleState" icon="el-icon-close">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script >
import axios from "axios";
export default {
  name: "AdminList",
  data() {
    return {
      headDate: Number,
      flights: {},
      rawList: [],
      currentPage: 1,
      pageSize: 6,
      states: {
        code: {
          "4": "已起飞",
          "3": "登机",
          "2": "选座",
          "1": "等候",
          "-1": "延误",
          "-2": "取消"
        },
        type: {
          "4": "info",
          "3": "primary",
          "2": "primary",
          "1": "success",
          "-1": "warning",
          "-2": "danger"
        }
      },
      changeState: {
        states: ["取消", "延误", "已起飞"],
        dialogVisible: false,
        pickedState: "",
        delayTime: 0,
        flightInfo: {}
      },
      dateFilter: {
        pickedDate: null
      },
      nameFilter: {
        name: ""
      }
    };
  },
  methods: {
    getData() {
      axios
        .get(this.$GLOBAL.localHost + "Admin/get/")
        // .get("/admin.json")
        .then(response => {
          this.rawList = [];
          for (let item of response.data.root) this.rawList.push(item[0]);
        })
        .catch(error => alert(error));
    },
    setCurrentPage(currentPage) {
      // 修改当前数据页码
      this.currentPage = currentPage;
    },
    //修改航班状态
    changeFlightState(info) {
      this.changeState.flightInfo = info;
      this.changeState.dialogVisible = !this.changeState.dialogVisible;
    },
    //修改航班信息
    changeFlightInfo(info) {
      this.$emit("edit-flight", info);
    },
    toStateCode(state) {
      if (state === "已起飞") return 4;
      if (state === "取消") return -2;
      if (state === "延误") return -1;
      return 0;
    },
    cancleState() {
      this.changeState.dialogVisible = false;
    },
    submitState() {
      var stateNum = this.toStateCode(this.changeState.pickedState);
      if (stateNum == 0) {
        this.$message.error("非法航班状态");
        return;
      }
      axios
        .post(this.$GLOBAL.localHost + "Admin/changeState/", {
          flightId: this.changeState.flightInfo.flightId,
          state: stateNum
        })
        .then(response => {
          if (response.data.success == "1") {
            this.$message.success("修改航班状态成功");
            this.cancleState();
            this.getData();
          } else {
            this.$message.error("修改航班状态失败");
          }
        })
        .catch(error => {
          this.$message.error("服务器异常");
        });
    }
  },
  computed: {
    flightNames: function() {
      // 所有航班的名字
      var names = [];
      for (let item of this.rawList) {
        if (names.indexOf(item.flightName) == -1) names.push(item.flightName);
      }
      return names;
    },
    filtedList: function() {
      // 符合名字和日期的航班
      var list = [];
      for (let item of this.rawList) {
        var date = item.startTime.split(" ")[0];
        var coName =
          this.nameFilter.name == ""
            ? true
            : item.flightName == this.nameFilter.name;
        var coDate =
          this.dateFilter.pickedDate == null
            ? true
            : date == this.dateFilter.pickedDate;
        if (coName && coDate) list.push(item);
      }
      return list;
    },
    //分页数据
    pagedList: function() {
      var start = (this.currentPage - 1) * this.pageSize;
      var end = start + this.pageSize;
      return this.filtedList.slice(start, end);
    },
    // 总页数
    totalPage: function() {
      return this.filtedList.length / this.pageSize;
    },
    // 总航班数
    totalAirplanes: function() {
      return this.filtedList.length;
    }
  },
  watch: {
    "dateFilter.pickedDate": function(newval, oldval) {
      this.getData();
    },
    "nameFilter.name": function(newval, oldval) {
      this.getData();
    },
    filtedList: function(newVal, oldVal) {
      this.$emit("filter-change", newVal);
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style scoped>
.header {
  font-weight: bolder;
  font-size: x-large;
  background-color: rgb(233, 238, 243);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.flight-detail {
  display: flex;
  justify-content: center;
  align-content: space-around;
  text-align: center;
  color: black;
  padding: 5px;
}
.detail-box {
  padding: 0 5px;
}
.detail-airport {
  margin: 10px 0;
  font-size: small;
}
.detail-time {
  width: 100px;
  font-size: 30px;
}
.detail-arrow {
  font-size: 20px;
}
</style>
